<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="200" />
        </van-swipe-item>
    </van-swipe>
    <!-- 快捷入口-->
    <div class="grids">
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item>
                <van-grid :column-num="5" :border="false">
                    <van-grid-item v-for="value in icondata" :key="value" :icon="value.icon" :text="value.text" />
                </van-grid>
            </van-swipe-item>
            <van-swipe-item>
                <van-grid :column-num="5" :border="false">
                    <van-grid-item v-for="value in icondatas" :key="value" :icon="value.icon" :text="value.text" />
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>

    <!--文章视频模块-->
    <div class="videoClass" v-for="item in videodata" :key="item.id" @click="onVideo(item.id)">
        <van-icon name="play-circle" size="40px" class="icons" />
        <div style="margin-top: 2px; margin-bottom: 5px;">{{ item.videoName }}</div>
        <div class="videos">
            <img :src="item.coverUrl" alt="" width="100%" height="230">
        </div>
        <div class="vtext">
            <van-row gutter=" 10">
                <van-col span="7">视频博主：{{ item.authorId }}</van-col>
                <van-col span="8">视频播放量：{{ item.viewCount }}万次播放</van-col>
                <van-col span="9">{{ item.createdTime }}</van-col>
            </van-row>

        </div>
    </div>



</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CatModelApi } from '../../api';
import { useRouter } from 'vue-router';
const router = useRouter();
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
const icondata = ref([
    { id: 1, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', text: '车型大全' },
    { id: 2, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/rank-fffb4b136cdb7c8a4423..png', text: '排行榜' },
    { id: 3, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/community-e7b0155680ebf038a88c..png', text: '车友圈' },
    { id: 4, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/usedcar-cc09df4fb419a8ffde96..png', text: '二手车' },
    { id: 5, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png', text: '条件选车' }

])
const icondatas = ref([
    { id: 1, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', text: '车型大全' },
    { id: 2, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/rank-fffb4b136cdb7c8a4423..png', text: '排行榜' },
    { id: 3, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/community-e7b0155680ebf038a88c..png', text: '车友圈' },
    { id: 4, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/usedcar-cc09df4fb419a8ffde96..png', text: '二手车' },
    { id: 5, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png', text: '条件选车' }

])

const videodata = ref([
    // { id: 1, img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/2135fd9a416b4ca49215fb0c4eca6174~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1760596907&x-signature=IZccsfE4l9%2F3%2B9LsC8DnjNexJ8Q%3D&psm=motor.content.packer&biz_tag=motorimage', videname: '6座满载挑战，说好的家庭呢！10台车只有一半能回家？', uname: '车老师李松桥', vplay: '7.3万次播放', vtime: '3天前' },
    // { id: 2, img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/2135fd9a416b4ca49215fb0c4eca6174~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1760596907&x-signature=IZccsfE4l9%2F3%2B9LsC8DnjNexJ8Q%3D&psm=motor.content.packer&biz_tag=motorimage', videname: '6座满载挑战，说好的家庭呢！10台车只有一半能回家？', uname: '车老师李松桥', vplay: '7.3万次播放', vtime: '3天前' },
    // { id: 3, img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/2135fd9a416b4ca49215fb0c4eca6174~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1760596907&x-signature=IZccsfE4l9%2F3%2B9LsC8DnjNexJ8Q%3D&psm=motor.content.packer&biz_tag=motorimage', videname: '6座满载挑战，说好的家庭呢！10台车只有一半能回家？', uname: '车老师李松桥', vplay: '7.3万次播放', vtime: '3天前' },
    // { id: 4, img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/2135fd9a416b4ca49215fb0c4eca6174~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1760596907&x-signature=IZccsfE4l9%2F3%2B9LsC8DnjNexJ8Q%3D&psm=motor.content.packer&biz_tag=motorimage', videname: '6座满载挑战，说好的家庭呢！10台车只有一半能回家？', uname: '车老师李松桥', vplay: '7.3万次播放', vtime: '3天前' },

])

const onVideo = (id) => { 
    console.log(id);
    router.push({ name: 'moveDeial', query: {id} })
}

onMounted(() => {
    CallCatModelApi()
})
const CallCatModelApi = () => {
    CatModelApi.select.call().then(res => {
        console.log(res);
        videodata.value = res
    })
}
</script>

<style scoped>
.videoClass {
    width: 95%;
    margin: 0 auto;
    margin-top: -30px;

    .videos {

        margin-bottom: 6px;
    }

    .vtext {
        font-size: 10px;
        color: gray;
        margin-bottom: 5px;
    }

    .icons {
        position: relative;
        top: 150px;
        /* 垂直方向居中第一步：距离顶部50% */
        left: 43%; 
    
        color: aliceblue;
        background-color: black;
        border-radius: 20px;
    }

}

.icons:hover {
    transform: translate(-50%, -50%) scale(1.1);
    /*  hover时放大10% */
    transition: transform 0.3s ease;
    /* 过渡动画，更流畅 */
}
</style>